<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>页面单跳转化率</title>

    <script type="text/javascript" src="../resources/js/contants.js"></script>
    <link href="../resources/css/bootstrap.min.css" rel="stylesheet">
    <link href="../resources/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.min.css" rel="stylesheet">
    <link href="../resources/css/dateRange.css" rel="stylesheet">
    <link href="../resources/css/bootstrap-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
    <link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
    <link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info">公用过滤条件</span>
                </div>
                <div class="ibox-content">
                    <span class="font-size-h1">任务名称:
                            <select id="location_province_select">
                            </select>
                        </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div id="demo" class="col-sm-12"></div>
        <div id="demo1" class="col-sm-12"></div>
    </div>
</div>

<script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../resources/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../resources/js/dateRange.js"></script>
<script type="text/javascript" src="../resources/js/bootstrap-select.min.js"></script>
<!-- highcharts js -->
<script type="text/javascript" src="../resources/js/highcharts.js"></script>
<script type="text/javascript" src="../resources/js/exporting.js"></script>
<script type="text/javascript" src="../resources/js/json2.js"></script>
<script type="text/javascript" src="../resources/js/common.js"></script>

<script type="text/javascript">


    $("#location_province_select").change(function(){
        var province = $(this).val();
        osChangeEvent(province);
    });

    function osChangeEvent( province) {
        loadContent( province);
    };

    function loadContent( province) {
        var url = COMMON_PREFIX_URL + "/stats/pageSplitConvert";

        if (province) {
            url += "?taskName=" + encodeURIComponent(province);
        }

        $.get(url, {}, function(data) {
            cleanContent("demo");
            cleanContent("demo1");

            if (data.code == '200') {
                if (data.data.length == 0) {
                    showNoConnent("demo");
                    return;
                }
                var chart2 = new Highcharts.Chart({
                    chart : {
                        renderTo : 'demo1', // 在那个标签上显示，指定id即可
                    },
                    xAxis : {
                        title : {
                            text : "页面(起->终)"
                        }
                    },
                    yAxis : [{
                        title : {
                            text : "百分比(%)"
                        }
                    }],
                    title: {
                        text: "页面单跳转化率分析图"
                    },
                    tooltip: {
                        valueSuffix: ' %'
                    },
                    series : []
                });

                var categories = [];
                var adSeries = {
                    name: "点击量(次数)",
                    data: []
                };

                $.each(data.data, function(i, item) {
                    console.log("data.data="+data.data);
                    console.log("item[key]="+item["key"]);
                    console.log("item[value]="+item["key"]);
                    categories.push(item["key"]);
                    adSeries["data"].push(item["value"]);
                });
                chart2.addSeries(adSeries);
                chart2.xAxis[0].setCategories(categories);
                return true;
            } else {
                showNoConnent("demo", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
            }
            return false;
        }, "json");
    }

    $(document).ready(function(){
        // 加载任务名称基本信息
        var url = COMMON_PREFIX_URL + "/stats/getTask";
        $.get(url, {}, function(data){
            if (data.code == '200' && data.data != null && data.data.length > 0) {
                var str = '<option value="all">all</option>';
                $.each(data.data, function(i, item) {
                    if (item != 'all') {
                        str += '<option value="' + item + '">' + item + '</option>'
                    }
                });
                $("#location_province_select").html(str);
                $("#location_province_select").addClass("selectpicker");

                $('.selectpicker').selectpicker();
            } else {
            }
        });

        loadContent($("#location_province_select").val());

    });


</script>
</body>
</html>